<template>
  <view>
    <view class="bg-white">
      <u-tabs
        :list="[{ name: '活动广场' }, { name: '我参加的' }]"
        lineColor="#5db292"
        :activeStyle="{
          color: '#333',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
          fontSize: '18px',
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
          fontSize: '18px',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 44px; font-size:24px"
      >
      </u-tabs>
      <view class="px-12">
        <u-tabs
          :list="list"
          lineHeight="0"
          :activeStyle="{
            color: '#02c581',
            fontSize: '24rpx',
            borderRadius: '40rpx',
            border: '1rpx solid #02c581',
            padding: '6rpx 24rpx',
            background: '#e2fffb',
          }"
          :inactiveStyle="{
            color: '#606266',
            fontSize: '24rpx',
            borderRadius: '40rpx',
            padding: '6rpx 24rpx',
            background: '#f6f4f5',
          }"
          itemStyle=" height: 44px; padding:0; padding-right:24rpx "
        >
        </u-tabs>
      </view>
    </view>
    <scroll-view style="height: calc(100vh - 88px)" scroll-y>
      <u-gap height="24rpx"></u-gap>
      <view
        class="pb-12"
        v-for="(item, index) in 10"
        :key="index"
        @click="goActivityDetail"
      >
        <view class="p-8 bg-white">
          <view class="flex">
            <u-image width="240rpx" height="220rpx" radius="12rpx"></u-image>
            <view class="flex-1 ml-8">
              <view class="ellipsis-1">【服务商见面会】 深圳站</view>
              <view
                class="u-border-bottom flex items-center py-8 justify-between"
              >
                <view class="flex items-center">
                  <u-avatar size="36rpx"></u-avatar>
                  <view class="text-12 ellipsis-1 color-gray ml-8"
                    >远方百合,意面频道</view
                  >
                </view>
                <view class="activity-tag color-primary px-8 text-12 py-4"
                  >会员活动</view
                >
              </view>
              <view class="flex items-center pt-8">
                <u-icon name="clock" size="24rpx"></u-icon>
                <view class="ml-8 text-12 color-gray">
                  10.24 19:00 - 10.24 21:00
                </view>
              </view>
              <view class="flex items-center pt-4">
                <u-icon name="map" size="24rpx"></u-icon>
                <view class="ml-8 text-12 color-gray ellipsis-1">
                  广州市番禺龙南大道 1 号龙南广场 1 号门
                </view>
              </view>
            </view>
          </view>
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <u-avatar-group
                size="36rpx"
                :urls="urls"
                gap="0.6"
              ></u-avatar-group>
              <text class="text-12 color-gray ml-8">200人报名</text>
            </view>
            <view class="flex items-center">
              <view>
                <u-button
                  text="报名中"
                  type="primary"
                  shape="circle"
                  :custom-style="{ height: '64rpx' }"
                ></u-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "全部" },
        { name: "会员活动" },
        { name: "招商活动" },
        { name: "线下沙龙" },
      ],
      urls: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
      ],
    };
  },
  methods: {
    goActivityDetail() {
      this.$Router.push({ name: "activityDetail" });
    },
  },
};
</script>
<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.activity-tag {
  background: #e5f9f2;
}
</style>
